<template>
  <div class="page4">
    <div class="content">
      <div class="containt fadeInDown">
        <p style="margin-bottom:1rem;"><span class="yellowfont">看！眼前是壮阔的智慧通用应用星河</span></p>
        <p>“数智化+改革发展”，2022年智慧通用全面跟踪落实各项改革举措，支持现代企业制度成熟定型，实现集团上下高效协同，各职能专业线全面贯通，管理服务更加顺畅，科学经营决策水平不断强化。</p>
        <!-- <p>其中<span class="yellowfont"> 即时通 </span>是您最常用的应用</p>
        <p>看那些星光如此璀璨，再靠近一点。</p> -->
      </div>
      <div class="centent-img">
        <div class="ball1">
          <img src="../../assets/images/bill2022/4/ball1.png" alt="">
        </div>
        <div class="ball2">
          <img src="../../assets/images/bill2022/4/ball2.png" alt="">
        </div>
        <div class="ball3">
          <img src="../../assets/images/bill2022/4/ball3.png" alt=""></img>
        </div>
        <div class="ball4">
          <img src="../../assets/images/bill2022/4/ball4.png" alt="">
        </div>
        <div class="ball5">
          <img src="../../assets/images/bill2022/4/ball5.png" alt="">
        </div>
        <div class="ball6">
          <img src="../../assets/images/bill2022/4/ball6.png" alt="">
        </div>
        <div class="ball7">
          <img src="../../assets/images/bill2022/4/ball7.png" alt="">
        </div>

      </div>
    </div>
    <div class="footer animate__backInUp">
      <img src="../../assets/images/bill2022/4/drive.png" alt="">
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  // 定义属性
  data () {
    return {

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
}
</script>
<style lang='less' scoped>
.page4 {
  .content {
    width: 100%;
    height: 60rem;
    position: absolute;
    top: 0rem;
    padding-top: 9.5rem;
    // background: url("../../assets/images/bill2022/4/top.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    .containt {
      margin-top: 1rem;
      width: 84%;
      text-align: left;
      font-size: 2.1rem;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #fefefe;
      line-height: 3.2rem;

      .yellowfont {
        color: #fbd858;
        font-weight: 600;
        font-size: 2.25rem;
      }
    }
    .centent-img {
      width: 100%;
      height: 30rem;
      position: relative;

      .ball1 {
        position: absolute;
        width: 9.5rem;
        height: 9.5rem;
        top: 8rem;
        left: 7rem;
        animation: slideUp 1s ease-in-out;
        -webkit-animation: slideUp 1s ease-in-out;
        -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
        -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
        -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .ball2 {
        position: absolute;
        width: 5.25rem;
        height: 5.25rem;
        top: 2.5rem;
        right: 12.125rem;
        animation: slideUp 1s ease-in-out;
        -webkit-animation: slideUp 1s ease-in-out;
        -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
        -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
        -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .ball3 {
        position: absolute;
        width: 8.6875rem;
        height: 10.5rem;
        top: 17.5rem;
        left: 0rem;
        animation: slideUp 1s ease-in-out;
        -webkit-animation: slideUp 1s ease-in-out;
        -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
        -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
        -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .ball4 {
        position: absolute;
        width: 12.25rem;
        width: 12.25rem;
        top: 12.5rem;
        left: 17rem;
        animation: slideUp 1s ease-in-out;
        -webkit-animation: slideUp 1s ease-in-out;
        -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
        -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
        -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .ball5 {
        position: absolute;
        width: 6.9375rem;
        width: 6.9375rem;
        top: 3.8rem;
        right: 3rem;
        animation: slideUp 1s ease-in-out;
        -webkit-animation: slideUp 1s ease-in-out;
        -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
        -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
        -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .ball6 {
        position: absolute;
        width: 4.8125rem;
        width: 4.8125rem;
        top: 28.8rem;
        left: 13rem;
        animation: slideUp 1s ease-in-out;
        -webkit-animation: slideUp 1s ease-in-out;
        -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
        -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
        -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .ball7 {
        width: 15.625rem;
        height: 15.625rem;
        position: absolute;
        top: 14.8rem;
        right: 4rem;
        animation: slideUp 1s ease-in-out;
        -webkit-animation: slideUp 1s ease-in-out;
        -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
        -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
        -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }

      @keyframes slideUp {
        0% {
          transform: translateY(0);
          transform: scale3d(1);
        }

        100% {
          transform: translateY(0.4rem);
          transform: scale3d(1.2);
        }
      }
      @-webkit-keyframes slideUp {
        0% {
          transform: translateY(0);
          transform: scale3d(1);
        }
        100% {
            transform: translateY(0.4rem);
          transform: scale3d(1.2);
        }
      }

      @-moz-keyframes slideUp {
        0% {
          transform: translateY(0);
          transform: scale3d(1);
        }
        100% {
            transform: translateY(0.4rem);
          transform: scale3d(1.2);
        }
      }
      @-o-keyframes slideUp {
        0% {
          transform: translateY(0);
          transform: scale3d(1);
        }
        100% {
            transform: translateY(0.4rem);
          transform: scale3d(1.2);
        }
      }
      @-ms-keyframes slideUp {
        0% {
          transform: translateY(0);
          transform: scale3d(1);
        }
        100% {
            transform: translateY(0.4rem);
          transform: scale3d(1.2);
        }
      }
    }
  }

  .footer {
    width: 100%;
    position: absolute;
    bottom: 0rem;
    img {
      width: 100%;
    }
  }
}

.swiper-slide-active .fadeInDown {
  animation: fadeInDown 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__fadeInRight {
  animation: fadeInRight 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__fadeInBottomLeft {
  animation: fadeInBottomLeft 2s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__fadeInRight {
  animation: fadeInRight 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes lightSpeedInRight {
  0% {
    // -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    // transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 1;
  }

  60% {
    -webkit-transform: skewX(3deg);
    transform: skewX(3deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-3deg);
    transform: skewX(-3deg);
  }

  to {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
}

.swiper-slide-active .animate__backInUp {
  animation: backInUp 2s ease-in-out;
  animation-iteration-count: 1;
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(4000px) scale(0.4);
    transform: translateY(4000px) scale(0.4);
    opacity: 0.7;
  }

  to {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.swiper-slide-active .animate__lightSpeedInRight {
  animation: lightSpeedInRight 2s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
</style>